<template>
  <view class="stepBox">
    <view v-for="(item, index) in stepList" :key="index" :style="styles" class="forItem">
      <view class="pb-14" :style="{ color: current >= item.value ? '#333' : '' }">
        {{ item.label }}
      </view>
      <view v-if="current === item.value && isCurrentStepErr" class="stepStatus status3">
        <text class="ali-icon fz-10">&#xeaf2;</text>
      </view>
      <view v-else class="stepStatus" :class="current >= item.value ? 'status2' : 'status1'">
        <text class="ali-icon fz-10">&#xed1d;</text>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
  import { propTypes } from '@/utils/propTypes';
  import { computed, type PropType, reactive, unref } from 'vue';

  export interface StepItemInter {
    label: string;
    value: number;
    isHide?: boolean;
  }

  const props = defineProps({
    current: propTypes.number.def(0),
    stepList: {
      type: Array as PropType<StepItemInter[]>,
      required: true,
    },
    isCurrentStepErr: propTypes.bool.def(false),
  });

  const styles = computed(() => ({ width: `calc(100% / ${unref(props.stepList).length})` }));
</script>

<style scoped lang="scss">
  $color-primary: #2878ff;
  $color-error: #ff3434;
  .stepBox {
    display: flex;

    .forItem {
      flex-shrink: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      font-size: 24rpx;
      padding: 38rpx 0 8rpx 0;
      color: #808080;
      position: relative;
    }

    .stepStatus {
      width: 28rpx;
      height: 28rpx;
      border-radius: 50%;
      display: flex;
      flex-shrink: 0;
      align-items: center;
      justify-content: center;
    }

    .forItem + .forItem {
      .stepStatus {
        &::before {
          display: block;
          content: ' ';
          position: absolute;
          width: calc(100% - 56rpx);
          height: 1px;
          bottom: calc(8rpx + 14rpx);
          left: -50%;
          margin-left: 28rpx;
        }
      }
    }

    // 未进行
    .stepStatus.status1 {
      color: #97edff;
      background-color: #97edff;

      &::before {
        background-color: #97edff;
      }
    }

    // 已进行或进行中
    .stepStatus.status2 {
      color: #ffffff;
      background-color: $color-primary;

      &::before {
        background-color: $color-primary;
      }
    }

    // 进行失败
    .stepStatus.status3 {
      color: #ffffff;
      background-color: $color-error;

      &::before {
        background-color: $color-error;
      }
    }
  }
</style>
